<template>
  <el-carousel style="background: #787878;" :interval="2000" height="300px" v-loading="loading">
    <el-carousel-item class="show-style" v-for="i in CardsData" :key="i">
      <NoticeCard
        :DetailNoticeData="i"
        :img_src="i.img_src"></NoticeCard>
    </el-carousel-item>
  </el-carousel>

</template>

<script>
import NoticeCard from './NoticeCard'
import axios from 'axios'

export default {
  name: 'NoticeCards',
  components: { NoticeCard },
  data () {
    return {
      loading: true,
      CardsData: [],
    }
  },
  created () {
    const _this = this
    axios.get('http://localhost:8080/Get_Public_noticeWithImage')
      .then(function (response) {
        _this.CardsData = response.data
        console.log(_this.CardsData)
        for (let i = 0; i < _this.CardsData.length; i = i + 1) {
          //console.log(_this.CardsData[i].img_src)
          const temp = _this.CardsData[i].img_src.substr(19)
          //console.log(temp)
          _this.CardsData[i].img_src = require('E:/job/NoticeImage/' + temp)
        }
        _this.loading = false
      })
      .catch(function (error) {
        console.log(error)
      })
  }
}
</script>

<style>
.show-style .el-card__body {
  padding: 0;
}

</style>
